<template>
	<div class="roleList">
		<div class="checkAll">
			<el-checkbox :indeterminate="selectIds.length>0 && !checkAll" :value="checkAll" @change="handleCheckAllChange"
				>全选</el-checkbox
			>
		</div>
		<div class="scroll-warp">
			<el-checkbox-group v-model="selectIds" @change="handleCheckedChange">
				<div class="itemBox" v-for="item in filterData" :key="item.F_RoleId">
					<el-checkbox :label="item.F_RoleId" :key="item.F_RoleId">
						<div class="list-item">
							<div class="headImg">
								<img :src="''" />
							</div>
							<span class="user-name">{{ item.F_FullName  }}</span>
						</div>
					</el-checkbox>
				</div>
			</el-checkbox-group>
		</div>
	</div>
</template>

<script>
import { store } from "../storeData.js"
import { debounce } from "../utils";
export default {
    name: "RoleList",
    props: {
        value: {
            type: Array,
            default: () => []
        },
        keyWords: {
            type: String,
            default:""
        }
    },
    data() {
        const data = store.roleData;
        return {
            data,
            selectIds: [],
            allIds: [],
            filterData: [],
        }
    },
    watch: {
        "data": {
            handler(v) {
                const all = [];
                v.data.forEach(item => {
                    all.push(item.F_RoleId);
                });
                this.allIds = all;
                this.filterData = v.data;
            },
            immediate:true
        },
        "value": {
            handler(v) {
                this.selectIds = v;
            },
            immediate:true,
        },
        "keyWords": {
            handler: debounce(function(v){
                //* 过滤数据
                    if (!v.trim()) {
                        this.filterData = this.data.data;
                        return
                    }
                    this.filterData = this.data.data.filter((item) => item.F_FullName.indexOf(v) > -1);
              })
        }
    },
    computed: {
        checkAll() {
            return this.selectIds.length == this.allIds.length
        }
    },
    methods: {
      handleCheckAllChange(val) {
        this.selectIds = val ? this.allIds.slice() : [];
        this.$emit("input", this.selectIds);
        this.$emit("select","Roles",this.selectIds)
      },
      handleCheckedChange() {
        this.$emit("input", this.selectIds);
        this.$emit("select", "Roles", this.selectIds)

      }
    }
}
</script>
<style lang="scss" scoped>
.roleList{
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;

   .checkAll{
      height: 40px;
      flex-shrink: 0;
      display: flex;
      box-sizing: border-box;
      padding: 10px 5px;
   }
   .scroll-warp{
      height:100%;
      overflow-y: auto;
      overflow-x: hidden;
      .itemBox{
         width:100%;
         height:40px;
         display:flex;
         align-items:center;
         box-sizing:border-box;
         padding:0px 5px;
         &:hover{
            background-color:#eee;
            border-radius:4px;

         }
         ::v-deep(.el-checkbox){
            display:flex;
            width:100%;
            height:100%;
            align-items:center;
         }

         .list-item{
            display:flex;
            height:100%;
            align-items:center;
            .headImg{
                width:32px;
                height:32px;
                border-radius:4px;
                overflow:hidden;
                margin-right:6px;
                img {
                    width:100%;
                    height:100%
                }
            }

         }
      }

   }
}
</style>
